<template>
  <div class="center">
    <my-header title="焊装上线" showdatatext="标准值：13" />
    <div class="data">
      <div id="hanzhuangshangxian_main"></div>
      <div>
        <div class="tableheard">
          <span>异常信息</span>
        </div>
        <hr />
        <div class="tabledata">
          <div>
            <div class="shijian">
              <span class="sp1">时间</span>
              <span class="shijiansp2">11:00</span>
              <span class="shijiansp3">13:00</span>
              <span class="shijiansp4">14:00</span>
            </div>
            <hr />
            <div class="chanzhi">
              <span class="sp1">产值</span>
              <span class="chanzhisp2">12</span>
              <span class="chanzhisp3">11</span>
              <span class="chanzhisp4">7</span>
            </div>
            <hr />
            <div class="chazhi">
              <span class="sp1">差值</span>
              <span class="chazhisp2">11:00</span>
              <span class="chazhisp3">13:00</span>
              <span class="chazhisp4">14:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
      <script>
import * as echarts from "echarts";
import myheader from "./myheader";

export default {
  components: {
    "my-header": myheader,
  },
  name: "hanzhuangshangxian",
  data() {
    return {
      showdata: true,
      showbtn: false,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById("hanzhuangshangxian_main");
      let myChart = echarts.init(chartDom, "dark");
      let option;

      let biaozhunzhi = 230;
      let maxIndex = biaozhunzhi;
      let minIndex = 205;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1", "2", "3", "4", "5", "6", "7"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "焊装上线",
            type: "bar",
            barWidth: "20%",
            markLine: {
              symbol: ["none", "none"], //去掉箭头
              lineStyle: {
                normal: {
                  type: "dashed",
                  color: "rgb(253, 187, 113) ", // 这儿设置安全基线颜色
                },
              },
              data: [
                {
                  name: "标准",
                  yAxis: biaozhunzhi,
                  label: {
                    position: "end",
                    formatter: "{b}",
                  },
                },
              ],
              label: {
                show: true,
                position: "insideStartBottom",
                color: "rgb(253, 187, 113)",
              },
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  let colors = [];
                  if (params.data > maxIndex) {
                    colors = ["#45d8b7", "#23705c"];
                  } else if (params.data < maxIndex && params.data > minIndex) {
                    colors = ["#0194ff", "#004a82"];
                  } else {
                    colors = ["#f2b304", "#8a6500"];
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: colors[0] },
                    { offset: 1, color: colors[1] },
                  ]);
                },
              },
            },
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
      <style  scoped>
.center {
  width: 100%;
  height: 100%;
}
.data {
  width: 100%;
  background-color: rgb(6, 10, 51);
  border: 1px solid rgb(85, 125, 219);
}
#hanzhuangshangxian_main {
  width: 100%;
  height: 22.75rem /* 300/16 */;
}
.data .tableheard {
  background-color: rgb(6, 10, 51);
  padding-top: 0.625rem /* 10/16 */;
  height: 1.875rem /* 30/16 */;
}
.data hr {
  border-image: linear-gradient(
      to right,
      rgb(85, 125, 219),
      rgba(6, 10, 51, 0.953)
    )
    1 10;
  margin: 0;
}
.data .tableheard span {
  font-size: 12px;
  color: rgb(102, 144, 255);
  font-weight: 700;
  padding-left: 1.25rem /* 20/16 */;
  height: 100%;
}
.data .tabledata hr {
  border-image: linear-gradient(
      to right,
      rgb(85, 125, 219),
      rgba(6, 10, 51, 0.953)
    )
    1 10;
  margin: 0;
}
.data .tabledata .shijian {
  height: 1.875rem /* 30/16 */;
  display: flex;
  align-items: center;
}

.data .tabledata .sp1 {
  font-size: 12px;
  color: rgb(102, 144, 255);
  font-weight: bold;
  padding-left: 10px;
}
.data .tabledata .shijiansp2 {
  font-size: 1rem /* 16/16 */;
  width: 5.625rem /* 90/16 */;
  text-align: center;
  height: 100%;
  margin-left: 0.625rem /* 10/16 */;
  line-height: 1.875rem /* 30/16 */;
  background: -webkit-linear-gradient(top, rgb(4, 8, 47), rgb(9, 19, 56),rgb(11, 25, 61));
}
.data .tabledata .shijiansp3 {
  font-size: 1rem /* 16/16 */;
  width: 5.625rem /* 90/16 */;
  text-align: center;
  height: 100%;
  line-height: 1.875rem /* 30/16 */;
  background: -webkit-linear-gradient(top, rgb(4, 8, 47), rgb(23, 21, 48),rgb(24, 22, 47));

}
.data .tabledata .shijiansp4 {
  font-size: 1rem /* 16/16 */;
  width: 5.625rem /* 90/16 */;
  text-align: center;   
  height: 100%;
  line-height: 1.875rem /* 30/16 */;
  background: -webkit-linear-gradient(top, rgb(4, 8, 47), rgb(23, 21, 48),rgb(24, 22, 47));
}

.data .tabledata .chanzhi {
  height: 3.125rem /* 50/16 */;
  display: flex;
  align-items: center;
}
.data .tabledata .chanzhisp2 {
  font-size: 20px;
  width: 5.625rem /* 90/16 */;
  height: 100%;
  text-align: center;
  margin-left: 0.625rem /* 10/16 */;
  line-height: 3.25rem /* 20/16 */;
  background: -webkit-linear-gradient(top, rgb(11, 25, 61), rgb(14, 38, 69),rgb(15, 45, 71));

}
.data .tabledata .chanzhisp3 {
  text-align: center;
  font-size: 20px;
  width: 5.625rem /* 90/16 */;
  height: 100%;
  text-align: center;
  margin-left: 1px;
  line-height: 3.25rem /* 20/16 */;
  background: -webkit-linear-gradient(top, rgb(24, 22, 47), rgb(50, 41, 42),rgb(50, 41, 42));
}
.data .tabledata .chanzhisp4 {
  font-size: 20px;
  width: 5.625rem /* 90/16 */;
  text-align: center; 
  height: 100%;
  text-align: center;
  margin-left: 1px;
  line-height: 3.25rem /* 20/16 */;
  background: -webkit-linear-gradient(top, rgb(24, 22, 47), rgb(50, 41, 42),rgb(50, 41, 42));

}

.data .tabledata .chazhi {
  height: 3.125rem /* 50/16 */;
  display: flex;
  align-items: center;
}

.data .tabledata .chazhisp2 {
  font-size: 23px;
  width: 5.625rem /* 90/16 */;
  text-align: center;
  margin-left: 0.625rem /* 10/16 */;
  height: 100%;
  line-height: 3.25rem /* 20/16 */;
  background: -webkit-linear-gradient(top, rgb(15, 45, 71), rgb(21, 61, 83),rgb(23, 69, 88));
}

.data .tabledata .chazhisp3 {
  font-size: 23px;
  width: 5.625rem /* 90/16 */;
  text-align: center;
  height: 100%;
  margin-left: 1px;
  line-height: 3.25rem /* 20/16 */;
  background: -webkit-linear-gradient(top, rgb(50, 41, 42), rgb(67, 53, 38),rgb(76, 59, 33));
}

.data .tabledata .chazhisp4 {
  font-size: 23px;
  width: 5.625rem /* 90/16 */;
  text-align: center;
  height: 100%;
  margin-left: 1px;
  line-height: 3.25rem /* 20/16 */;
  background: -webkit-linear-gradient(top, rgb(50, 41, 42), rgb(67, 53, 38),rgb(76, 59, 33));
}
</style>
      